// 在文件顶部添加 math 模块引用
@use "sass:math";
.login {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;

    &-con {
        position: absolute;
        right: 160px;
        top: 50%;
        transform: translateY(-60%);
        width: 300px;

        &-header {
            font-size: 16px;
            font-weight: 300;
            text-align: center;
            padding: 30px 0;
        }

        .form-con {
            padding: 10px 0 0;
        }

        .login-tip {
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
    }
}


@function vw($px) {
  @return (math.div($px, 1920)) * 87vw;
}

$color-text-normal: #606266;
$--color-primary: var(--el-color-primary);

.page-login {
    $backgroundColor: #fff;
    background-color: $backgroundColor;
    height: 100%;
    position: relative;

    // 层
    .page-login--layer {
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        .page-login--head {
            display: flex;
            align-items: center;
            height: vw(120);
            img {
                width: vw(66);
                height: vw(66);
                padding: vw(32) vw(26);
                box-sizing: content-box;
            }

            .page-login--head-title {
                padding: 0 vw(15);
                font-size: vw(30);
                font-weight: 500;
                line-height: vw(51);
                font-weight: 700;
                color: $--color-primary;
            }

            .page-login--head-title-text {
                padding: 0 vw(15);
                font-size: vw(20);
            }
        }
    }

    .page-login--layer-area {
        overflow: hidden;
    }

    // 登陆页面控件的容器
    .page-login--content {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        // height: 83%;
        flex: 1 ;
        background: linear-gradient(360deg, $--color-primary 0%, $--color-primary 100%);

        .page-login--content-img {
            width: auto;
            height: auto;
            min-width: 400px;
            max-width: vw(800);
            position: relative;
            left: vw(50);
        }

        .page-login--content-main {
            min-width: 400px;
            max-height: 320px;
            margin-top: -200px;
            z-index: 2;
        }
    }
    .page-login--footer{
        height: vw(120);
    }
    // header
    .page-login--content-header {
        padding: 1em 0;

        .page-login--content-header-motto {
            margin: 0px;
            padding: 0px;
            color: $color-text-normal;
            text-align: center;
            font-size: 12px;
        }
    }

    // main
    .page-login--logo {
        width: vw(240);
        margin-bottom: 2em;
        margin-top: -2em;
    }

    // 登录表单
    .page-login--form {
        box-shadow: 0px 0px vw(40) rgba(149, 149, 149, 0.16);

        .login-tab {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;

            span {
                display: inline-block;
                width: 50%;
                text-align: center;
                padding: 6px 0;
                color: #999999;
            }

            .active {
                color: $--color-primary;
                font-weight: 600;
            }
        }

        .el-form-item {
            margin: vw(30) 0;
        }

        // 卡片
        :deep(.el-card)  {
            background: rgba(255, 255, 255, 0.9);

            .el-input {
                width: 100%;
                max-width: 493px;
                max-height: 70px;
                background: rgba(255, 255, 255, 1);
                opacity: 1;
                border-radius: vw(4);
                border: 1px solid rgba(203, 203, 203, 1);

                .el-input-group__prepend {
                    background: rgba(255, 255, 255, 1);
                    border: 0px;
                    // padding: 0 vw(22);
                    box-sizing: border-box;
                }

                .el-input__inner {
                    height: inherit;
                    font-size: 18px;
                    border: 0px;
                    box-sizing: border-box;
                }
            }

            .el-button {
                max-width: 493px;
                max-height: 70px;
            }
        }

        // 登录按钮
        .button-login {
            width: 100%;
            // margin-bottom: vw(30);
        }

        .tip_box {
            display: flex;
            justify-content: flex-end;

            .tip {
                padding: 0px 5px;
                box-sizing: border-box;
                margin-top: 5px;
                text-align: right;
                font-size: 12px;
                cursor: pointer;
            }
        }

        :deep(.el-input-group__append) {
            max-width: 120px;
            background-color: $--color-primary;
            color: #fff;
        }
    }

    // footer
    .page-login-footer {
        padding: 1em 0;

        .page-login-footer-locales {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                padding: 0 vw(10);
                min-width: vw(20);
                height: auto;
            }
        }

        .page-login-footer-locales a,
        .page-login-footer-options,
        .page-login-footer-copyright {
            padding: 0.5em 0;
            font-size: 12px;
            line-height: 12px;
            text-align: center;
            color: $color-text-normal;
        }
    }
}

@media screen and (max-width: 1000px) {
    .page-login--content-img {
        display: none;
    }
}

@keyframes change {
    0% {
        width: 0%;
    }

    100% {
        width: 90%;
    }
}